<template>
    <u-popup :show="show" mode="center" @close="close" bgColor="transparent">
        <view class="unPop">
            <view class="container" ref="containerRef">
                <view v-for="(item,index) in boxlist" :key="index" class="box" v-show="isVisible[index]">
                    <view class="box1">
                        <view class="numberStyle">
                            {{item.number}}
                        </view>

                        <image v-if="item.type==0" src="/static/hb.png" class="imgBox"></image>
                        <image v-if="item.type==1" :src="setSwitch(item.stoneLevel)" class="imgBox"></image>
                    </view>
                    <view style="z-index: 111;">{{item.str}}</view>
                </view>
            </view>
            <view v-if="isShow" class="isShow" @click="close">关闭</view>
        </view>
    </u-popup>
</template>

<script>
	export default {
	    props: {
	        show: {
	            type: Boolean,
	            default: false
	        },
	        boxlist: {
	            type: Array,
	            default: []
	        }
	    },
	    data() {
	        return {
	            isShow: false,
	            isVisible: [], // 用来控制每个元素的显示
	            containerRef: null // 用于引用容器
	        };
	    },
	    watch: {
	        show(newVal) {
	            if (newVal) {
	                this.startShow(); // popup打开时开始显示
	            }
	        },
	        boxlist(newBoxList) {
	            if (newBoxList.length >= 50) {
	                this.scrollToBottom(); // 当宝箱数量达到50时滚动到底部
	            }
	        }
	    },
	    methods: {
	        setSwitch(type) {
	            const stoneImages = {
	                1: '/static/stone-images/0.png',
	                2: '/static/stone-images/1.png',
	                3: '/static/stone-images/2.png',
	                4: '/static/stone-images/4.png',
	                5: '/static/stone-images/5.png',
	                6: '/static/stone-images/6.png'
	            };
	            return stoneImages[type] || '';
	        },
	        close() {
	            this.$emit('success')
	            this.isShow = false
	        },
	        startShow() {
	            this.isVisible = Array(this.boxlist.length).fill(false);
	
	            let index = 0;
	            const interval = setInterval(() => {
	                if (index < this.boxlist.length) {
	                    this.$set(this.isVisible, index, true); // 显示当前的item
	                    index++;
	                } else {
	                    this.isShow = true;
	                    clearInterval(interval); // 完成后清除定时器
	                    if (this.boxlist.length >= 50) {
	                        this.scrollToBottom(); // 自动滚动到底部
	                    }
	                }
	            }, 200);
	        },
	        scrollToBottom() {
	            if (this.containerRef) {
	                // 设置容器滚动到最底部
	                this.containerRef.scrollTop = this.containerRef.scrollHeight;
	            }
	        }
	    }
	}

</script>
<style scoped>
	.numberStyle {
		font-size: 32rpx;
		color: #FFFFFF;
		z-index: 111;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.unPop {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.isShow {
		width: 120rpx;
		height: 50rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 25rpx;
		margin-top: 30rpx;
	}

	.imgBox {
		width: 70rpx;
		height: 70rpx;
		border-radius: 10rpx;
		position: absolute;
	}

	.box1 {
		width: 110rpx;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF;
		border-radius: 10rpx;
		/* margin-right: 10rpx; */
		margin-bottom: 10rpx;
		padding: 15rpx;
		box-sizing: border-box;
		position: relative;
	}

	.box {
		width: 110rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: space-evenly; */
		font-size: 20rpx;
		/* border: 1rpx solid #FFFFFF; */
		color: #FFFFFF;
		border-radius: 10rpx;
		margin: 5rpx 5rpx 5rpx 5rpx;
		/* box-sizing: border-box; */
	}

	.container {
		width: 700rpx;
		max-height: 600rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		z-index: 999999;

	}
</style>